﻿@page "/getting-started/installation"

<DocsPage MaxWidth="MaxWidth.Large">
    <DocsPageHeader Title="Installation" SubTitle="Getting started with MudBlazor for faster and easier web development.">
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Templates</Title>
                <Description>
                    <MudAlert Severity="Severity.Info">
                        <MudText>We provide ready to run blazor style templates that comes pre configured with everything you need to get going faster.</MudText>
                     </MudAlert>
                    <MudText Class="pa-2">You will find them in the <MudLink Href="https://github.com/Garderoben/MudBlazor.Templates">Github repository</MudLink> called <CodeInline>MudBlazor.Templates</CodeInline> and each template comes with both WASM and Server versions.</MudText>
                </Description>
            </SectionHeader>
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Manual Install</Title>
                <SubTitle>1. Install the package</SubTitle>
                <Description>Find the package through NuGet Package Manager or install it with following command.</Description>
            </SectionHeader>
            <MarkdownInstallPackage />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <SubTitle>2. Add Imports</SubTitle>
                <Description>After the package is added you need to add the following in your <CodeInline>_Imports.razor</CodeInline></Description>
            </SectionHeader>
            <MarkdownAddImports />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <SubTitle>3. Add CSS & Font references</SubTitle>
                <Description> Add the following to your HTML head section, it's either <CodeInline>index.html</CodeInline> or <CodeInline>_Host.cshtml</CodeInline> depending on whether you're running WebAssembly or Server.</Description>
            </SectionHeader>
            <MarkdownAddReferences />
            <MudText GutterBottom="true" Class="mt-4">
                <b class="mud-secondary-text">Note:</b> If you're installing on a fresh Blazor template make sure to remove everything in your <CodeInline SecondaryColor="true">site.css</CodeInline> and remove the <CodeInline SecondaryColor="true">bootstrap.min.css</CodeInline> completely from either <CodeInline>index.html</CodeInline> or <CodeInline>_Host.cshtml</CodeInline>.
            </MudText>
            <MudText GutterBottom="true" Class="mt-4">
                In the HTML body section of either <CodeInline>index.html</CodeInline> or <CodeInline>_Host.cshtml</CodeInline> add this:
            </MudText>
            <MarkdownAddJsReference />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <SubTitle>4. Register Services</SubTitle>
            </SectionHeader>
            <MudText GutterBottom="true">
                <b>For Blazor WebAssembly</b> add the following to your <CodeInline>Program.Main</CodeInline>
            </MudText>
            <MarkdownRegisterServicesWebAssembly />
            <MudText GutterBottom="true" Class="mt-6">
                <b>For Blazor Server</b> add the following in your <CodeInline>Startup.cs</CodeInline> under <CodeInline>ConfigureServices</CodeInline>
            </MudText>
            <MarkdownRegisterServicesServer />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <SubTitle>5. Add Components</SubTitle>
                <Description>Add the following components to your <CodeInline>MainLayout.razor</CodeInline> or <CodeInline>App.razor</CodeInline> note that the <CodeInline>ThemeProvider</CodeInline> is essential for MudBlazor but the rest is optional.</Description>
            </SectionHeader>
            <MarkdownAddComponents />
        </DocsPageSection>
        <DocsPageSection>
            <MudText Class="mt-16" Align="Align.Center" Typo="Typo.h6" GutterBottom="true">Now build and run your project, if you didn't get any errors, your good to go.</MudText>
            <MudText Class="mb-16" Align="Align.Center" Typo="Typo.h6">Jump over to the <MudLink Typo="Typo.h6" Href="/getting-started/usage">usage</MudLink> guide to get started.</MudText>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
<Footer />
